<template>
	<div class="backdrop">
		<div class="login-container">
			<div class="login-title">运营管理公司人力资源管理系统</div>
			<div class="login-form">
				<el-tabs v-model="state.tabsActiveName" type="card" class="custom-card-tabs"
					@tab-click="handleTabClick">
					<el-tab-pane :label="$t('message.label.one1')" name="account">
						<Account />
					</el-tab-pane>
				</el-tabs>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { defineAsyncComponent, reactive, onMounted } from 'vue';
import { storeToRefs } from 'pinia';
import { useThemeConfig } from '/@/stores/themeConfig';
import { NextLoading } from '/@/utils/loading';
import type { TabsPaneContext } from 'element-plus';

const Account = defineAsyncComponent(() => import('/@/views/login/component/account.vue'));
const storesThemeConfig = useThemeConfig();
const { themeConfig } = storeToRefs(storesThemeConfig);

const state = reactive({
	tabsActiveName: 'account',
	isScan: false,
});

const handleTabClick = (tab: TabsPaneContext, event: Event) => {
	console.log('标签页点击:', tab, event);
};

onMounted(() => {
	NextLoading.done();
});
</script>

<style scoped lang="scss">
.backdrop {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	width: 100%;
	background: url('/src/assets/bgc.3dc3b233.png') no-repeat center;
	background-size: cover;
	position: relative;
}

.login-title {
	font-size: 30px;
	font-weight: 700;
	text-align: center;
	padding: 0.5em;
	color: #fff;
	text-shadow: 5px 3px 5px #2c3e50, 0 2px 4px rgba(0, 0, 0, 0.2);
	white-space: nowrap;
}

.login-form {
	width: 390px;
	margin: auto;
	background-color: #fff;
	border-radius: 8px;
	padding:3.5rem 3rem;
	margin-bottom: 15vh;
	box-sizing: var(--boxType);
}
</style>